<template>
  <div>
      <div class="box" @mousedown="drag"   draggable="true" ref='nav'>
          <div class="ud" @click="turnBig" >{{ud}}</div>
          <div @click.stop="fullScreen" class="navItem">全 屏</div>
          <div @click.stop="exitfullScreen" class="navItem">退出全屏</div>
          <div @click.stop="drawCanvas" class="navItem">涂鸦</div>
          <div @click.stop="drawWater" class="navItem">添加水印</div>
          <div @click.stop="removeWaterMask" class="navItem">去除水印</div>
          <div @click.stop="luMedia" class="navItem">录屏</div>
      </div>
      <tuya  v-model:t_show="t_show" />
  </div>
</template>

<script>
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import {useRouter} from 'vue-router'
import tuya from './tuya.vue'
export default {
  components:{tuya},
  setup(){
    let {ctx}=getCurrentInstance()
    let router=useRouter()
    let t_show=ref(false)
    // interface constraints {
    //   audio: boolean | MediaTrackConstraints, // 指定是否请求音轨或者约束轨道属性值的对象
    //   video: boolean | MediaTrackConstraints, // 指定是否请求视频轨道或者约束轨道属性值的对象
    // }
    let drag=(en)=>{
       let offsetx=en.offsetX
       let offsety=en.offsetY
       en.target.ondragend=function(e){
            let x=e.clientX-offsetx
            let y=e.clientY-offsety
            e.target.style.top=y+'px'
            e.target.style.left=x+'px'
       }
 
    }
    let ud=reactive({
        ud:'展开'
    })
    let islong=ref(false)
    let turnBig=(en)=>{
        let x=en.clientX-en.offsetX
        let y=en.clientY-en.offsetY
        if(islong.value){
           ctx.$refs.nav.style.cssText=`
              height:60pxpx;
              top:${y}px;
              left:${x}px;
            `
            ud.ud='展开'
        }else{
          ctx.$refs.nav.style.cssText=`
             height:260px;
             top:${y}px;
             left:${x}px;
           `
           ud.ud='收起'
        }
       islong.value=!islong.value
    }
    //全屏
    let fullScreen=async ()=>{
      document.body.requestFullscreen().then(()=>{
        ctx.$message.success('可 esc 退出全屏')
      }).catch(err=>console.log(err))
      
    }
    let exitfullScreen=()=>{
      document.exitFullscreen()
    }
    //drawWater
    let drawWater=()=>{
      
      let waterMask=document.querySelector('#water-mask')
      
      let width=window.innerWidth+600
      let height=window.innerHeight+400
      waterMask.style.width=width
      waterMask.style.width=height
      let p_num=Math.ceil(height/200)
      let span_num=Math.ceil(width/400)
      let p_html=''
      let span_html=''
      for(let i=1;i<=span_num;i++){
       span_html+=`<span>天物芸芸 各归其根</span>`
      }
      for(let j=1;j<=p_num;j++){
        p_html+=`<p>${span_html}</p>`
      }
      waterMask.innerHTML=p_html
    }
    let removeWaterMask=()=>{
      let waterMask=document.querySelector('#water-mask')
      waterMask.innerHTML=''
    }
    let drawCanvas=()=>{
      t_show.value=true
    }

    //luping
    let tracks=[]  //媒体数据
    let options={   //数据类型
      mimeType:'video/webm;codecs=vp8'
    }
    let Media=null
    let luMedia=()=>{
       navigator.mediaDevices.getDisplayMedia({audio:true,video:true}).then(stream=>{
         startRecode(stream)
       })
    }
    function startRecode(stream){
       Media=new MediaRecorder(stream,options)
       Media.ondataavailable=event=>{
         if(event?.data?.size>0){
           tracks.push(event.data)
         }
       }
       Media.onstop=stop
       Media.start()
       console.log(Media)
    }
    function stop(){
      let blob=new Blob(tracks,{type:'video/webm'})
      let mediaURL=URL.createObjectURL(blob)
      ctx.$confirm(
        '录屏回放已经生成，是否前往',
        '录屏结束',
         {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
        }
      ).then(()=>{
         router.push({
           path:"/fan",
           query:{
             mediaURL
           }
         })
      }).catch(()=>{
        ctx.$bus.emit('media',mediaURL)
      })
    }
    return {
        drag,turnBig,...toRefs(ud),fullScreen,exitfullScreen,drawWater,removeWaterMask,drawCanvas,t_show,
        luMedia
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  position:fixed;
  top:100px;
  right:20px;
  width:60px;
  height:60px;
  border:1px solid red;
  border-radius: 30px;
  background: rgb(33, 119, 184);
  z-index: 999;
  transition: 1s;
  overflow:hidden;
  text-align: center;
  .ud{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      line-height: 60px;
  }
  .navItem{
      text-align: center;
      width: 60px;
      height: 28px;
      line-height: 28px;
      font-size:14px;
      color: aliceblue;
      border-top: 1px dashed #fff;

  }
}
</style>